import React from 'react';
import styles from './index.module.scss';
import { update } from '@/utils/immutableUtil';
import { connect } from 'react-redux';
import SelectCodeUpdate from '../SelectCodeUpdate';
import { withConsumer } from '../../../context';

@withConsumer
@connect(({ chat }) => ({
  pptSetTextOpen: chat.pptSetTextOpen,
  pptSetTextData: chat.pptSetTextData,
  pptSetBoxOpen: chat.pptSetBoxOpen,
}))
class Comp extends React.Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);

  // 关闭文本编辑器
  handleClose = () => {
    const {
      value: { changeState, event },
    } = this.props;
    changeState({
      pptSetTextOpen: false,
      pptSetTextData: {},
    });
  };

  // 保存更新后的文本
  handleSave = (updatedHtml) => {
    console.log('触发了保存');
    const {
      pptSetTextData,
      value: { event },
    } = this.props;
    const { index } = pptSetTextData;
    event.emit(`pptTextUpdate-${index}`, {
      html: updatedHtml,
    });
    console.log(pptSetTextData);
  };

  render() {
    const { pptSetTextOpen, pptSetTextData, pptSetBoxOpen } = this.props;

    // 准备初始HTML内容
    const initialHtml =
      pptSetTextData && pptSetTextData.domString
        ? `${pptSetTextData.domString}`
        : '<div></div>';

    return (
      <div className={styles.container}>
        {pptSetTextOpen && (
          <SelectCodeUpdate
            isOpen={pptSetTextOpen}
            onClose={this.handleClose}
            initialHtml={initialHtml}
            onSave={this.handleSave}
          />
        )}

        {/* {pptSetBoxOpen && (
          <div className={styles.toolsMsg}>要求EFFLUX编辑选定项。</div>
        )} */}
      </div>
    );
  }
}

export default Comp;
